<template>
	<!-- 审批 -->
	<view class="approval">
		<u--textarea
			v-model="reason"
			placeholder="请输入处理意见"
			count
			:maxlength="100"
			height="140"
			border="none"
			confirmType="done"
		>
		</u--textarea>
		<u-action-sheet :actions="processList" title="节点" :show="procesShow" @select="selectProcessClick" @close="onProcessClose" safeAreaInsetBottom :round="20" cancelText="取消"></u-action-sheet>
		<!-- 附件的显示 -->
		<view >
			<scroll-view class="file-style" scroll-x="true">
				<view style="margin: 0 20rpx; display: flex;align-items: center; justify-content: space-between;" v-if="resultObj.isRejectNode == 1">
					<u-checkbox-group
						v-model="checkboxValue"
						placement="column"
						@change="checkboxChange"
					>
						<u-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in checkboxList"
							:key="index"
							:label="item.name"
							:name="item.label"
						>
						</u-checkbox>
					</u-checkbox-group>
					<view @click="onChoice" v-if="isShowInput">
						<u--input
							style="margin-left: 20rpx;"
							v-model="processText"
						    placeholder="请选择退回节点"
						    border="surround"
							readonly
							
						  ></u--input>
					</view>
				</view>
				<view 
					class="file-content" 
					:style="index==0?'margin-left: 40rpx;':index+1 ==fileList.length?'margin-right:40rpx;':''" 
					v-for="(item,index) in fileList" 
					:key="index"
				>
					<view class="return"><u-icon name="close-circle-fill" color="#B2B2B2" size="22" @click="deleteFile(item, index)"></u-icon></view>
					<view class="name">{{item.fileName}}</view>
					<view class="icon-size">
						<view class="icon">
							<!-- <image
								src="../../static/synergy/doc.png"
								class="file_image"
								mode="aspectFill" 
							></image> -->
							<image src="@/static/synergy/pdf.png" v-if="item.type == '.pdf' || item.type == '.PDF'" mode="aspectFill" class="file_image1"></image>
							<image 
								src="@/static/synergy/excel.png" 
								v-else-if="item.type == '.xlsx' || item.type == '.xls' || item.type == '.xlsm' || item.type == '.xlsb'" mode="aspectFill" 
								class="file_image1"
							></image>
							<image
								@click="viewImage(item.filePath)"
								src="@/static/synergy/image.png"
								v-else-if="item.type == '.png' || item.type == '.jpg' || item.type == '.jpeg' || item.type == '.gif'" mode="aspectFill" 
								class="file_image1"
							></image>
							<image
								src="@/static/synergy/video.png"
								v-else-if="item.type == '.video' || item.type == '.AVI' || item.type == '.mov' || item.type == '.rmvb' || item.type == '.rm' || item.type == '.FLV' || item.type == '.mp4' || item.type == '.3GP' "
								mode="aspectFill" 
								class="file_image1"
							></image>
							<image
								src="@/static/synergy/word.png"
								v-else-if="item.type == '.doc' || item.type == '.docx'" mode="aspectFill" 
								class="file_image1"
							></image>
							<image
								src="@/static/synergy/zip.png"
								v-else-if="item.type == '.rar' || item.type == '.zip'" mode="aspectFill"
								class="file_image1"
							></image>
							<image
								src="@/static/synergy/ppt.png"
								v-else-if="item.type == '.ppt' || item.type == '.pptx'" mode="aspectFill"
								class="file_image1"
							></image>
							<image
								src="@/static/synergy/other.png"
								mode="aspectFill"
								v-else
								class="file_image1"
							></image>
						</view>
						<view class="size">{{item.size}}</view>
					</view>
				</view>
			</scroll-view>
			
		</view>
		<view style="display: flex;" class="approval_icon">
			<!-- <image src="../../static/synergy/approval.png" mode="aspectFill" class="approval_image" @click="getCommonWord"></image> -->
			<view class="icon">
				<!-- <u-icon @click="uploadPhoto" size="26" name="photo" color="#1E6FFF" style="margin-right: 10rpx;"></u-icon>
				<u-icon @click="uploadFile" size="26" name="attach" color="#1E6FFF"></u-icon> -->
				<h-upload-file v-model="fileList" :disabled="disabled" :isApproval="true"></h-upload-file>
			</view>
			
		</view>
		
		<view class="approval_buttons" v-if="isShowInput" style="display: flex;align-items: center;justify-content: center;">
			<view class="btn2" @click="returnProcess" :style="{flex: nodeObj.isSubmit == '1'?1:'initial',margin: nodeObj.isSubmit == '1'?'0 20rpx':''}">
				<view :style="{background: reason? '#1E6FFF': 'rgba(30, 111, 255, 0.49)' }" style="width: 100%;">
					确认提交
				</view> 
			</view>
		</view>
		<view class="approval_buttons" v-else>
			<view class="btn1" :style="noAgree?'width: 100%;margin-right: 0px': ''" @click="returnConfirm" v-if="nodeObj.isSubmit !== '1'">退回</view>
			<view class="btn2" v-if="!noAgree" @click="agree" :style="{flex: nodeObj.isSubmit == '1'?1:'initial',margin: nodeObj.isSubmit == '1'?'0 20rpx':''}">
				<view :style="{background: reason? '#1E6FFF': 'rgba(30, 111, 255, 0.49)' }" style="width: 100%;">
					同意
				</view> 
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		imageUrl
	} from '@/utils/common.js'
	import {
		rejectProcess, // 退回
		processTaskTransInfo,
		processComplete // 提交完成
	} from '@/api/index.js'
	export default {
		data() {
			return {
				isShowInput: false,
				checkboxValue: [],
				procesShow: false,
				processText: '', // 退回节点的名称
				processChoice: {},
				processList: [],
				
				fileList: [], // 附件上传数据返回
				disabled: false, 
				reason: '',
				model: {},
				nodeObj: {},
				resultObj: {}, // 查询流程流转信息
				nextnode: '',
				isClick: false,
				noAgree: false, // 判断是否展示同意按钮
				checkboxList: [
					{
						name: '退回至历史审批节点',
						label: '1',
						disabled: false
					}
				]
			}
		},
		onLoad() {
			var that = this
			// #ifdef APP-NVUE
				var eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
				var eventChannel = this.getOpenerEventChannel();
			// #endif
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				that.model = JSON.parse(decodeURIComponent(data.model))
				that.nodeObj = JSON.parse(decodeURIComponent(data.nodeObj))
				that.resultObj = JSON.parse(decodeURIComponent(data.resultObj))
				that.noAgree = data.noAgree? true: false
				that.nextnode = data.nextnode
				// 删选当前节点
				if (that.resultObj.rejectNodeTask && that.resultObj.rejectNodeTask.length) {
					that.processList = that.resultObj.rejectNodeTask.filter(item => item.NAME_ != that.resultObj.taskName)
					that.processList.map(value => {
						value.name = value.NAME_
						return value
					})
				}
			})
		},
		methods: {
			// 选择是否返回到相对应的节点
			checkboxChange (n) {
				this.processChoice  = {}
				this.processText = ''
				this.isShowInput = n[0] && n[0].length && n[0] == 1? true : false
				
			},
			
			onChoice () {
				this.procesShow = true
			},
			onProcessClose () {
				this.procesShow = false
			},
			
			selectProcessClick(item){
				this.processChoice  = item
				this.processText = item.name
			},
			
			// 跳转 常用审批语页面
			getCommonWord(){
				if(this.isClick){
					return
				}
				var that = this
				uni.navigateTo({
					url:'/pages/synergy/commonWord',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							// 接受 常用审批语页面 返回的 审批语
							that.reason = data
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('acceptDataFromOpenerPage', item)
					}
				})
			},
			// 弹窗框确定 退回
			returnConfirm(){
				uni.showModal({
					content: '任务将退回至发起人，是否继续',
					cancelText: '否',
					confirmText: '是',
					confirmColor: '#576B95',
					cancelColor: '#000000',
					success:  (res) => {
						if (res.confirm) {
							if(!this.reason){
								this.$refs.uToast.show({
									message: '请输入处理意见',
									duration: 1000,
									type: 'default'
								})
								return
							}
							this.isClick = true
							var params = {
								bizTaskList: "[]",
								ccUserIds: "",
								ccUserRealNames: "",
								fileList: JSON.stringify(this.fileList),
								isSubmit: this.nodeObj.isSubmit,
								method: "put",
								nextCodeCount: "",
								nextUserId: "",
								nextUserName: "",
								nextnode: "",
								procInsId: this.model.processInstanceId,
								processModel: 1,
								reason: this.reason,
								rejectModelNode: "",
								taskId: this.model.id,
							}
							rejectProcess(params).then(res => {
								this.$refs.uToast.show({
									message: res.message,
									type: res.success?'success':'error',
									duration: 1000,
									complete() {
										uni.switchTab({
											url: '/pages/synergy/synergy'
										})
									}
								})
							}).catch(err => {
								this.isClick = false
							})
						} else if (res.cancel) {
							this.isClick = false
						}
					}
				});
			},
			
			returnProcess(){
				if (!this.processChoice || !this.processChoice.TASK_DEF_KEY_) {
					this.$refs.uToast.show({
						message: '请选择退回节点',
						duration: 1000,
						type: 'error'
					})
					return false
				}
				if(!this.reason){
					this.$refs.uToast.show({
						message: '请输入处理意见',
						duration: 1000,
						type: 'error'
					})
					return
				}
				uni.showModal({
					content: '该任务将同意审批，是否继续？',
					cancelText: '否',
					confirmText: '是',
					confirmColor: '#576B95',
					cancelColor: '#000000',
					success:  (res) => {
						if (res.confirm) {
							
							this.isClick = true
							var params = {
								bizTaskList: "[]",
								ccUserIds: "",
								ccUserRealNames: "",
								fileList: JSON.stringify(this.fileList),
								isSubmit: this.nodeObj.isSubmit,
								method: "post",
								nextCodeCount: "",
								nextUserId: "",
								nextUserName: "",
								nextnode: "",
								procInsId: this.model.processInstanceId,
								processModel: 3,
								reason: this.reason,
								rejectModelNode: this.processChoice.TASK_DEF_KEY_,
								taskId: this.model.id,
							}
							processComplete(params).then(res => {
								this.$refs.uToast.show({
									message: res.message,
									type: res.success?'success':'error',
									duration: 1000,
									complete() {
										uni.switchTab({
											url: '/pages/synergy/synergy'
										})
									}
								})
							}).catch(err => {
								this.isClick = false
							})
						} else if (res.cancel) {
							this.isClick = false
						}
					}
				});
			},
			// 上传附件
			uploadPhoto () {
				// 上传图片
			},
			
			// 删除附件
			deleteFile (item, index) {
				this.fileList.splice(index, 1);
			},
			
			// 预览图片
			viewImage(url){
				var imgArr = ['gif', 'jpg', 'png', 'bmp', 'jpeg', 'webp']
				var urlArr = []
				if (Array.isArray(this.fileList)) {
					this.fileList.map(resp => {
						urlArr.push(imageUrl(resp.filePath))
					})
				} else {
					urlArr = this.fileList.split(',') // 把附件变成数组
				}
				var index = urlArr.indexOf(imageUrl(url))
				if (index == -1) {
					index = 0
				}
				uni.previewImage({
					urls: urlArr,
					current: index,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							uni.downloadFile({
								url: url,
								success: (result) => {
									if (result.statusCode === 200) {
										//文件保存到本地
										uni.saveImageToPhotosAlbum({
											filePath: result.tempFilePath, //临时路径
											success: function(ress) {
												uni.showToast({
													icon: 'none',
													mask: true,
													title: '文件已保存：' + ress.path, //保存路径
													duration: 3000,
												});
											}
										});
									}
								},
								fail: (err) => {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '失败请重新下载',
									});
								}
							})
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			
			// 同意
			agree(){
				if(this.isClick){
					this.$refs.uToast.show({
						message: '请勿重复点击！',
						duration: 1000,
						type: 'default'
					})
					return
				}
				// if(!this.reason){
				// 	this.$refs.uToast.show({
				// 		message: '请输入处理意见',
				// 		duration: 1000,
				// 		type: 'default'
				// 	})
				// 	this.isClick = false
				// 	return
				// }
				var reason = ''
				if(!this.reason){
					reason = '同意'
					// this.$refs.uToast.show({
					// 	message: '请输入处理意见',
					// 	duration: 1000,
					// 	type: 'error'
					// })
					// return
				} else {
					reason = this.reason
				}
				this.isClick = true
				var _this = this
				uni.showModal({
					content: '该任务将同意审批，是否继续？',
					cancelText: '否',
					confirmText: '是',
					confirmColor: '#576B95',
					cancelColor: '#000000',
					success: (res) => {
						if (res.confirm) {
							
							var params = {
								bizTaskList: "[]",
								ccUserIds: "",
								ccUserRealNames: "",
								fileList: JSON.stringify(_this.fileList),
								isSubmit: _this.nodeObj.isSubmit,
								method: "post",
								nextCodeCount: "",
								nextUserId: "",
								nextUserName: "",
								nextnode: _this.nextnode?_this.nextnode.substring(1):'',
								procInsId: _this.model.processInstanceId,
								processModel: 1,
								reason: reason,
								rejectModelNode: "",
								taskId: _this.model.id,
							}
							processComplete(params).then(res => {
								_this.$refs.uToast.show({
									message: res.message,
									type: res.success?'success':'error',
									duration: 500,
									complete() {
										uni.switchTab({
											url: '/pages/synergy/synergy'
										})
										_this.isClick = false
									}
								})
							}).catch(err => {
								_this.isClick = false
							})
						} else if (res.cancel) {
							_this.isClick = false
						}
					}
				});
				
			}
		}
	}
</script>
<style lang="scss" scoped>
.approval{
	width: 100%;
	height: 100%;
	background-color: #fff;
	// 附件
	.file-style{
		white-space: nowrap;
		position: fixed;
		bottom: 220rpx;
		.file-content{
			margin-top: 40rpx;
			background: rgba(30, 111, 255, 0.1);
			border-radius: 10rpx;
			width: 172rpx;
			height: 172rpx;
			position: relative;
			padding: 20rpx;
			display: inline-block;
			margin-right: 28rpx;
			.return{
				border: 1px solid #FFFFFF;
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				border-radius: 50%;
			}
			.name{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.9);
				
				white-space:pre-wrap; // 换行
				word-break: break-all;           //在恰当的断字点进行换行 
				overflow: hidden;                 //文字超出的进行隐藏
				text-overflow: ellipsis;          //超出的文字用省略号表示
				display: -webkit-box;             //将元素设为盒子伸缩模型显示
				text-overflow: ellipsis;          //利用盒子模型 
				-webkit-box-orient: vertical;     //伸缩方向设为垂直方向
				-webkit-line-clamp: 3;            //设定一共3行，超出的部分隐藏，并用省略号来表示
			}
			.icon-size{
				display: flex;
				align-items: center;
				margin-top: 18rpx;
				.icon{
					image{
						width: 32rpx;
						height: 32rpx;
						border-radius: 4rpx;
					}
				}
				.size {
					margin-left: 8rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.3);
				}
			}
		}
	}
	
	.approval_icon{
		width: 686rpx;
		padding: 0 32rpx;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 130rpx;
		// left: 32rpx;
		.approval_image{
			width: 196rpx;
			height: 88rpx;
			
		}
		.icon{
			display: flex;
			align-items: center;
		}
	}
	
	.approval_buttons{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 36rpx;
		display: flex;
		border-top: 2rpx solid #F2F2F2;
		z-index: 0;
		view{
			width: 328rpx;
			height: 80rpx;
			border-radius: 5px;
			line-height: 80rpx;
			text-align: center;
		}
		.btn1{
			background: rgba(0,0,0,0.05);
			color: rgba(0,0,0,0.5);
			margin-right: 24rpx;
		}
		.btn2{
			background: rgba(30, 111, 255, 0.49);
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>